<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件管理系统 - Into_IoTDB</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            min-height: 100vh;
            color: #ffffff;
            position: relative;
            overflow-x: hidden;
        }

        /* 背景飞机图片 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><path d="M20 50 L40 30 L60 50 L80 40 L100 50 L120 45 L140 50 L160 48 L180 50" stroke="rgba(255,255,255,0.1)" stroke-width="2" fill="none"/><circle cx="50" cy="50" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="150" cy="50" r="3" fill="rgba(255,255,255,0.1)"/></svg>');
            background-size: 300px 150px;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.3;
            z-index: -1;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 文件上传区域 */
        .upload-section {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 600;
        }

        .section-title .info-icon {
            width: 20px;
            height: 20px;
            background: #4a9eff;
            border-radius: 50%;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
        }

        .upload-zone {
            border: 2px dashed #4a9eff;
            border-radius: 8px;
            padding: 60px 20px;
            text-align: center;
            background: rgba(74, 158, 255, 0.05);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .upload-zone:hover {
            border-color: #66b3ff;
            background: rgba(74, 158, 255, 0.1);
        }

        .upload-icon {
            font-size: 48px;
            color: #4a9eff;
            margin-bottom: 15px;
        }

        .upload-text {
            font-size: 16px;
            color: #ffffff;
        }

        /* 主要内容区域 */
        .main-content {
            display: block;
            margin-bottom: 30px;
        }

        /* 标签信息列表 */
        .tag-info {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 25px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .tag-controls {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 20px;
        }

        .batch-modify-btn {
            background: #4a9eff;
            border: none;
            border-radius: 6px;
            padding: 8px 16px;
            color: white;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: background 0.3s ease;
        }

        .batch-modify-btn:hover {
            background: #66b3ff;
        }

        /* 数据表格 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .data-table th,
        .data-table td {
            padding: 12px 8px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .data-table th {
            background: rgba(255, 255, 255, 0.1);
            font-weight: 600;
            font-size: 14px;
            color: #ffffff;
        }

        .data-table td {
            font-size: 13px;
            color: #e0e0e0;
        }

        .data-table tr:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .file-name {
            font-family: 'Courier New', monospace;
            color: #4a9eff;
        }

        .verification-result {
            color: #ff6b6b;
            font-size: 12px;
        }

        .tag-info-link {
            color: #4a9eff;
            text-decoration: none;
            font-size: 12px;
        }

        .tag-info-link:hover {
            text-decoration: underline;
        }

        /* 状态标签样式 */
        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-align: center;
            min-width: 60px;
        }

        .status-research {
            background: rgba(52, 144, 220, 0.2);
            color: #3490dc;
            border: 1px solid #3490dc;
        }

        .status-production {
            background: rgba(40, 167, 69, 0.2);
            color: #28a745;
            border: 1px solid #28a745;
        }

        .status-maintenance {
            background: rgba(255, 193, 7, 0.2);
            color: #ffc107;
            border: 1px solid #ffc107;
        }

        .status-completed {
            background: rgba(40, 167, 69, 0.2);
            color: #28a745;
            border: 1px solid #28a745;
        }

        .status-pending {
            background: rgba(255, 107, 107, 0.2);
            color: #ff6b6b;
            border: 1px solid #ff6b6b;
        }

        /* 分页控件 */
        .pagination {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 20px;
            gap: 15px;
        }

        .pagination-info {
            font-size: 14px;
            color: #e0e0e0;
        }

        .pagination-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .page-btn {
            background: #4a9eff;
            border: none;
            border-radius: 4px;
            padding: 6px 12px;
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .page-btn:hover {
            background: #66b3ff;
        }

        .page-btn.active {
            background: #2a5298;
        }

        .page-size-selector {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            padding: 6px 8px;
            color: white;
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            .upload-section,
            .tag-info {
                padding: 20px;
            }
            
            .data-table {
                font-size: 12px;
            }
            
            .data-table th,
            .data-table td {
                padding: 8px 4px;
            }
        }

        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            margin: 2% auto;
            padding: 0;
            border-radius: 16px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .modal-header {
            padding: 20px 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #ffffff;
            margin: 0;
        }

        .close {
            color: #ffffff;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
            line-height: 1;
        }

        .close:hover {
            color: #ff6b6b;
        }

        .modal-body {
            padding: 20px 30px;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        }

        .form-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px dotted #7f8c8d;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            font-size: 13px;
            color: #ffffff;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .form-input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            padding: 12px 16px;
            color: #ffffff;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: #4a9eff;
            background: rgba(255, 255, 255, 0.15);
        }

        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .form-input[readonly] {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.7);
        }

        .form-select {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            padding: 12px 16px;
            color: #ffffff;
            font-size: 14px;
            cursor: pointer;
        }

        .form-select:focus {
            outline: none;
            border-color: #4a9eff;
            background: rgba(255, 255, 255, 0.15);
        }

        .form-select option {
            background: #1e3c72;
            color: #ffffff;
        }

        .form-textarea {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            padding: 12px 16px;
            color: #ffffff;
            font-size: 14px;
            min-height: 80px;
            resize: vertical;
            font-family: inherit;
        }

        .form-textarea:focus {
            outline: none;
            border-color: #4a9eff;
            background: rgba(255, 255, 255, 0.15);
        }

        .modal-footer {
            padding: 20px 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: flex-end;
            background: rgba(255, 255, 255, 0.1);
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: #4a9eff;
            color: white;
        }

        .btn-primary:hover {
            background: #66b3ff;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                margin: 5% auto;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .modal-header,
            .modal-body,
            .modal-footer {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 文件上传区域 -->
        <div class="upload-section">
            <div class="section-title">
                <div class="info-icon">i</div>
                文件上传
            </div>
            <div class="upload-zone" onclick="selectFiles()">
                <div class="upload-icon">↑</div>
                <div class="upload-text">选择上传文件夹</div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 标签信息列表 -->
            <div class="tag-info">
                <div class="section-title">
                    <div class="info-icon">i</div>
                    标签信息列表
                </div>
                
                <div class="tag-controls">
                    <button class="batch-modify-btn">
                        <span>✏</span>
                        批量修改
                    </button>
                </div>

                <table class="data-table">
                    <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>文件名</th>
                            <th>飞机编号</th>
                            <th>发动机编号</th>
                            <th>发动机位置</th>
                            <th>台架编号</th>
                            <th>文件上传时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="checkbox" checked></td>
                            <td class="file-name">enginedata_018_20250919.csv</td>
                            <td>PL001</td>
                            <td>ENG001</td>
                            <td>左发</td>
                            <td>RIG001</td>
                            <td>2025-09-19 16:41:23</td>
                            <td><a href="#" class="tag-info-link" onclick="showTagInfo('uploaded')">◇标签信息</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td class="file-name">flightdata_025_20250918.csv</td>
                            <td>PL002</td>
                            <td>ENG002</td>
                            <td>右发</td>
                            <td>RIG002</td>
                            <td>2025-09-18 14:30:15</td>
                            <td><a href="#" class="tag-info-link" onclick="showTagInfo('uploaded')">◇标签信息</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td class="file-name">testdata_033_20250917.csv</td>
                            <td>PL003</td>
                            <td>ENG003</td>
                            <td>中发</td>
                            <td>RIG003</td>
                            <td>2025-09-17 09:15:42</td>
                            <td><a href="#" class="tag-info-link" onclick="showTagInfo('uploaded')">◇标签信息</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td class="file-name">enginedata_041_20250916.csv</td>
                            <td>PL004</td>
                            <td>ENG004</td>
                            <td>左发</td>
                            <td>RIG004</td>
                            <td>2025-09-16 11:22:33</td>
                            <td><a href="#" class="tag-info-link" onclick="showTagInfo('not-uploaded')">◇修改标签信息</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td class="file-name">flightdata_052_20250915.csv</td>
                            <td>PL005</td>
                            <td>ENG005</td>
                            <td>右发</td>
                            <td>RIG005</td>
                            <td>2025-09-15 16:45:18</td>
                            <td><a href="#" class="tag-info-link" onclick="showTagInfo('uploaded')">◇标签信息</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td class="file-name">enginedata_063_20250914.csv</td>
                            <td>PL006</td>
                            <td>ENG006</td>
                            <td>左发</td>
                            <td>RIG006</td>
                            <td>2025-09-14 13:25:47</td>
                            <td><a href="#" class="tag-info-link" onclick="showTagInfo('not-uploaded')">◇修改标签信息</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td class="file-name">testdata_074_20250913.csv</td>
                            <td>PL007</td>
                            <td>ENG007</td>
                            <td>右发</td>
                            <td>RIG007</td>
                            <td>2025-09-13 10:18:29</td>
                            <td><a href="#" class="tag-info-link" onclick="showTagInfo('not-uploaded')">◇修改标签信息</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td class="file-name">flightdata_085_20250912.csv</td>
                            <td>PL008</td>
                            <td>ENG008</td>
                            <td>中发</td>
                            <td>RIG008</td>
                            <td>2025-09-12 15:42:11</td>
                            <td><a href="#" class="tag-info-link" onclick="showTagInfo('uploaded')">◇标签信息</a></td>
                        </tr>
                    </tbody>
                </table>

                <!-- 分页控件 -->
                <div class="pagination">
                    <div class="pagination-info">共8条</div>
                    <div class="pagination-controls">
                        <button class="page-btn active">1</button>
                        <select class="page-size-selector">
                            <option value="10">10条/页</option>
                            <option value="20">20条/页</option>
                            <option value="50">50条/页</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 标签信息弹窗 -->
    <div id="tagInfoModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="modalTitle">详情</h2>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            
            <div class="modal-body">
                <form id="tagInfoForm">
                    <div class="form-section">
                        <div class="section-title">基础信息</div>
                        <div class="form-grid">
                            <div class="form-group">
                                <label class="form-label">项目编号</label>
                                <input type="text" class="form-input" name="projectId" placeholder="请输入项目编号">
                            </div>
                            <div class="form-group">
                                <label class="form-label">地点</label>
                                <input type="text" class="form-input" name="place" placeholder="请输入地点">
                            </div>
                            <div class="form-group">
                                <label class="form-label">产品阶段</label>
                                <select class="form-select" name="productPhase">
                                    <option value="">请选择产品阶段</option>
                                    <option value="1">维护保障</option>
                                    <option value="2">批产</option>
                                    <option value="3">科研</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">数据来源</label>
                                <select class="form-select" name="dataSource">
                                    <option value="">请选择数据来源</option>
                                    <option value="控制器">控制器</option>
                                    <option value="健康管理">健康管理</option>
                                    <option value="台架数采">台架数采</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">一级分类</label>
                                <select class="form-select" name="dataTypeFirst">
                                    <option value="">请选择一级分类</option>
                                    <option value="1">部件试验数据</option>
                                    <option value="2">整机试验数据</option>
                                    <option value="3">飞行试验数据</option>
                                    <option value="4">地面台架</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">二级分类</label>
                                <select class="form-select" name="dataTypeSecond">
                                    <option value="">请选择二级分类</option>
                                    <option value="1">性能数据</option>
                                    <option value="2">振动数据</option>
                                    <option value="3">温度数据</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">人员</label>
                                <select class="form-select" name="dataUser">
                                    <option value="">请选择人员</option>
                                    <option value="张三">张三</option>
                                    <option value="李四">李四</option>
                                    <option value="王五">王五</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">起始时间</label>
                                <input type="datetime-local" class="form-input" name="startTime">
                            </div>
                            <div class="form-group">
                                <label class="form-label">台架号</label>
                                <input type="text" class="form-input" name="deviceNo" placeholder="请输入台架号">
                            </div>
                            <div class="form-group">
                                <label class="form-label">试验科目</label>
                                <input type="text" class="form-input" name="subject" placeholder="请输入科目">
                            </div>
                            <div class="form-group" style="grid-column: 1 / -1;">
                                <label class="form-label">备注</label>
                                <textarea class="form-textarea" name="remark" placeholder="请输入备注信息"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="section-title">配套信息</div>
                        <div class="form-grid">
                            <div class="form-group">
                                <label class="form-label">飞机型号</label>
                                <input type="text" class="form-input" name="planeId" placeholder="请输入飞机型号">
                            </div>
                            <div class="form-group">
                                <label class="form-label">飞机编号</label>
                                <input type="text" class="form-input" name="planeNo" placeholder="请输入飞机编号">
                            </div>
                            <div class="form-group">
                                <label class="form-label">发动机型号</label>
                                <input type="text" class="form-input" name="engineId" placeholder="请输入发动机型号">
                            </div>
                            <div class="form-group">
                                <label class="form-label">发动机编号</label>
                                <input type="text" class="form-input" name="engineNo" placeholder="请输入发动机编号">
                            </div>
                            <div class="form-group">
                                <label class="form-label">发动机位置</label>
                                <select class="form-select" name="enginePlace">
                                    <option value="">请选择发动机位置</option>
                                    <option value="单发">单发</option>
                                    <option value="双发-左侧">双发-左侧</option>
                                    <option value="双发-右侧">双发-右侧</option>
                                    <option value="三发-左">三发-左</option>
                                    <option value="三发-中">三发-中</option>
                                    <option value="三发-右">三发-右</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">关闭</button>
            </div>
        </div>
    </div>

    <script>
        // 弹窗功能
        function showTagInfo(status) {
            const modal = document.getElementById('tagInfoModal');
            const modalTitle = document.getElementById('modalTitle');
            
            if (status === 'uploaded') {
                modalTitle.textContent = '详情';
                // 已上传文件，只读模式
                setFormReadOnly(true);
            } else {
                modalTitle.textContent = '详情';
                // 未上传文件，可编辑模式
                setFormReadOnly(false);
            }
            
            // 填充示例数据
            fillSampleData();
            
            modal.style.display = 'block';
        }

        function closeModal() {
            const modal = document.getElementById('tagInfoModal');
            modal.style.display = 'none';
        }

        function setFormReadOnly(readOnly) {
            const form = document.getElementById('tagInfoForm');
            const inputs = form.querySelectorAll('input, select, textarea');
            
            inputs.forEach(input => {
                if (input.name === 'fileName') {
                    // 文件名始终只读
                    input.readOnly = true;
                } else {
                    input.readOnly = readOnly;
                    input.disabled = readOnly;
                }
            });
        }

        function fillSampleData() {
            // 填充示例数据
            const form = document.getElementById('tagInfoForm');
            const sampleData = {
                importFileIndex: 1001,
                projectId: 'XX-10C',
                place: '北京市',
                productPhase: '1',
                dataTypeFirst: '1',
                dataTypeSecond: '1',
                dataSource: '健康管理',
                startTime: '2025-09-21T13:23:28',
                channelNo: 'A通道',
                planeId: 'XX10C',
                planeNo: '002',
                engineId: 'XX10C',
                engineNo: '002右',
                enginePlace: '双发-右侧',
                fileName: 'enginedata_018_20250919.csv',
                protocolId: 1001,
                runningTime: 3600.5,
                uploadTime: '2025-09-19T16:41:23',
                subject: '发动机性能测试',
                deviceNo: 'RIG001',
                handleStatus: '1',
                isMainChannel: '1',
                hdfsBackPath: '/hdfs/backup/2025/09/19/',
                serialNumber: 20250919001,
                csvSize: 1024000,
                importType: '0',
                dataUser: '张三',
                isAnalyzed: '0',
                isArchive: '0',
                remark: '滑油'
            };

            // 填充表单数据
            Object.keys(sampleData).forEach(key => {
                const input = form.querySelector(`[name="${key}"]`);
                if (input) {
                    input.value = sampleData[key];
                }
            });
        }

        function saveTagInfo() {
            const form = document.getElementById('tagInfoForm');
            const formData = new FormData(form);
            const data = {};
            
            // 收集表单数据
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            console.log('保存标签信息:', data);
            
            // 这里可以添加实际的保存逻辑
            alert('标签信息保存成功！');
            closeModal();
        }

        // 点击弹窗外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('tagInfoModal');
            if (event.target === modal) {
                closeModal();
            }
        }

        // ESC键关闭弹窗
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeModal();
            }
        });

        // 文件选择功能
        function selectFiles() {
            const input = document.createElement('input');
            input.type = 'file';
            input.multiple = true;
            input.webkitdirectory = true; // 允许选择文件夹
            input.onchange = function(e) {
                const files = Array.from(e.target.files);
                console.log('选择的文件:', files);
                // 这里可以添加上传逻辑
                alert(`已选择 ${files.length} 个文件`);
            };
            input.click();
        }

        // 批量修改功能
        document.querySelector('.batch-modify-btn').addEventListener('click', function() {
            const checkedItems = document.querySelectorAll('.data-table input[type="checkbox"]:checked');
            if (checkedItems.length === 0) {
                alert('请先选择要修改的记录');
                return;
            }
            alert(`将对 ${checkedItems.length} 条记录进行批量修改`);
        });

        // 表格行选择功能
        document.querySelectorAll('.data-table input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                // 这里可以添加行选择逻辑
                console.log('行选择状态改变:', this.checked);
            });
        });

        // 分页功能
        document.querySelectorAll('.page-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.page-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                // 这里可以添加分页逻辑
            });
        });

        // 页面大小选择
        document.querySelector('.page-size-selector').addEventListener('change', function() {
            console.log('页面大小改变为:', this.value);
            // 这里可以添加页面大小改变逻辑
        });
    </script>
</body>
</html>
